<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
<div id="sandbox"></div>
<script>
description('Outer scope !important rules wins with higher specificity (v0 bug compatibility).');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(
                    '::content span { color: green !important; }')),
            createDOM('content', {})),
        createDOM('style', {},
            document.createTextNode(
                '#target { color: red !important; }')),
        createDOM('span', {'id': 'target'})));

shouldBeEqualToString('getComputedStyle(target).color', 'rgb(255, 0, 0)');
</script>
